<template>
  <view class="storey-box">
    <!-- 顶部标题 -->
    <text class="storey-title">{{ title }}</text>
    <!-- 楼层顶图 -->
    <navigator key="navigatorStoreyTopImage" style="width: 98%"
      :url="props.list[0] ? '/subpkg/goods_detail/goods_detail?id=' + props.list[0].id : ''" open-type="navigate"
      hover-class="navigator-hover">
      <image class="storey-top-img" :src="props.list[0].image" mode="scaleToFill" v-if="props.list.length > 2" />
    </navigator>
    <!-- 楼层小图 -->
    <view class="storey-item">
      <navigator v-for="(item, index) in props.list" :key="item.id"
        :url="'/subpkg/goods_detail/goods_detail?id=' + item.id" v-show="props.list.length > 2 ? index > 0 : index <= 0"
        open-type="navigate" hover-class="navigator-hover">
        <image :src="item.image" mode="scaleToFill" />
      </navigator>
    </view>
  </view>
</template>

<script lang="ts" setup>
import type { StoreyList } from "@/config/data/data"
import {
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onUnmounted,
  defineProps,
} from 'vue'

//接受到的楼层列表数据以及楼层标题
const props = defineProps<{ list: StoreyList[]; title: string }>()

// 组件周期函数--监听组件挂载完毕
onMounted(() => { })
// 组件周期函数--监听组件数据更新之前

onBeforeUpdate(() => { })
// 组件周期函数--监听组件数据更新之后
onUpdated(() => { })
// 组件周期函数--监听组件激活(显示)
onActivated(() => { })
// 组件周期函数--监听组件停用(隐藏)
onDeactivated(() => { })
// 组件周期函数--监听组件销毁之前
onUnmounted(() => { })
</script>

<style scoped lang="scss">
.storey-box {
  display: flex;
  padding: 30rpx 0 0;
  flex-direction: column;
  justify-items: center;
  align-items: center;
  background-color: $uni-box-color;
  box-shadow: 0 10rpx 10rpx rgba(109, 108, 108, 0.269);

  .storey-title {
    font-weight: 600;
    color: #0c0c0c;
    font-size: 38rpx;
    padding: 0 10rpx 10rpx;
    margin-right: auto;
  }

  .storey-top-img {
    width: 100%;
    height: 300rpx;
    margin: auto;
  }

  .storey-item {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 47%);
    justify-content: space-around;
    margin-top: 20rpx;
    grid-gap: 20rpx 0;

    image {
      width: 100%;
      height: 280rpx;
    }
  }
}
</style>
